<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>姓：<input type="text" v-model="firstName"></div>
    <div>名：<input type="text" v-model="lastName"></div>
    <div>全名：<input type="text" v-model="fullName"></div>
</div>
<script src="../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {firstName: "陶", lastName: "品奇"},
        computed: {
            fullName: {
                get() {
                    console.log("fullName被读取了")
                    return this.firstName + ' ' + this.lastName
                },
                set(value) {
                    console.log("fullName被修改了")
                    const newValue = value.split(' ')
                    this.firstName = newValue[0]
                    this.lastName = newValue[newValue.length - 1]
                }
            }
        }
    })
</script>
</body>
</html>
